<template>
    <view class="bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 1800px; overflow: auto;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 100px;">
                        <div style="width: 100px;">广告图片</div>
                    </div>
                    <div class="td text-center bold" style="width: 100px;">类型</div>
                    <div class="td text-center bold" style="width: 200px;">跳转到url</div>
                    <div class="td text-center bold" style="width: 200px;">跳转到商品详情</div>
                    <div class="td text-center bold" style="width: 150px;">跳转到店铺</div>
                    <div class="td text-center bold" style="width: 150px;">跳转到二级系统分类</div>
                    <div class="td text-center bold" style="width: 150px;">跳转到商城动态分类列表</div>
                    <div class="td text-center bold" style="width: 150px;">跳转到商城动态详情</div>
                    <div class="td text-center bold" style="width: 200px;">开始时间</div>
                    <div class="td text-center bold" style="width: 200px;">结束时间</div>
                    <div class="td text-center bold" style="width: 100px;">状态</div>
                    <div class="td text-center bold" style="width: 100px;">显示顺序</div>
                </div>
                <div class="tr" v-for="(item, index) in tbAdList" :key="index">
                    <div class="td" style="width: 100px;">
                        <myImg :obj="item" :sysFile="{fkId: item.id}" :key="item.id"
                               :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :defaultUrl="'/static/default-image/goods.jpg'"
                               :imageView="'imageView2/1/w/200/h/200'"
                        ></myImg>
                    </div>
                    <div class="td" style="width: 100px;">{{item.typeText}}</div>
                    <div class="td" style="width: 200px;">{{item.navUrl}}</div>
                    <div class="td" style="width: 200px;">
                        <div style="display: flex;">
                            <div v-if="item.navGoodsId">
                                <myImg :obj="item" :sysFile="{fkId: item.navGoodsId, typeMark: 'thumbnail'}"
                                       :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                                       :defaultUrl="'/static/default-image/goods.jpg'"
                                       :imageView="'imageView2/1/w/200/h/200'"
                                ></myImg>
                            </div>
                            <div>
                                {{item.navGoodsTitle | toEmptyStr}}
                            </div>
                        </div>
                    </div>
                    <div class="td" style="width: 150px;">{{item.navStoreName | toEmptyStr}}</div>
                    <div class="td" style="width: 150px;">{{item.navSystemClassGrade2Name | toEmptyStr}}</div>
                    <div class="td" style="width: 150px;">{{item.navCommunityDynamicTypeName | toEmptyStr}}</div>
                    <div class="td" style="width: 150px;">{{item.navCommunityDynamicTitle | toEmptyStr}}</div>
                    <div class="td" style="width: 200px;">{{item.startTime}}</div>
                    <div class="td" style="width: 200px;">{{item.endTime}}</div>
                    <div class="td" style="width: 100px;">{{item.statusText}}</div>
                    <div class="td" style="width: 100px;">{{item.displayOrder}}</div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 50px;" v-if="!tbAdList.length">
            <u-empty text="数据为空" mode="data"></u-empty>
        </div>
    </view>
</template>

<script>
    import myImg from '@/components/my-img'
    import {TbAdService} from "../../../dev/services/tb-ad.service";

    export default {
        props: ["fkId"],
        data() {
            return {
                tbAdList: []
            }
        },
        components: {
            myImg
        },
        mounted() {
            const _self = this;
            _self.findTbAdListCascade();
        },
        methods: {
            findTbAdListCascade() {
                const _self = this;
                new TbAdService().findTbAdListCascade({
                    fkId: _self.fkId
                }).then(result => {
                    _self.tbAdList = [];
                    _self.$nextTick(() => {
                        _self.tbAdList = result;
                    });
                    _self.$forceUpdate();
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>
